import React, { Component } from 'react'
import { Tabbar } from 'react-vant';
import {NavLink} from "react-router-dom"
import RouterView from '../router/RouterView'
import * as action from "../api/index"
import {connect} from "react-redux"
import {
    bindActionCreators//把所有的action合并
} from "redux"
export class Index extends Component {
    state={
        active:0
    }
    componentDidMount(){
        this.props.getData()
    }
    setActive(e){
        this.setState({active:e})
    }
    render() {
        let {routes} = this.props
        let {active} = this.state
        return (
            <div className="Index">
                <header>头部</header>
                <main>
                    <RouterView routes={routes}/>
                </main>
                <footer>
                    <Tabbar value={active} onChange={this.setActive.bind(this)}>
                        <Tabbar.Item icon="home-o"> 
                            <NavLink to="/index/home">首页</NavLink>
                        </Tabbar.Item>
                        <Tabbar.Item icon="search">
                            <NavLink to="/index/classify">分类</NavLink>
                        </Tabbar.Item>
                        <Tabbar.Item icon="friends-o">
                            <NavLink to="/index/supper">惊喜</NavLink>
                        </Tabbar.Item>
                        <Tabbar.Item icon="setting-o">
                            <NavLink to="/index/shopCar">购物车</NavLink>
                        </Tabbar.Item>
                        <Tabbar.Item icon="fire-o">
                            <NavLink to="/index/my">我的</NavLink>
                        </Tabbar.Item>
                    </Tabbar>
                </footer>
            </div>
        )
    }
}
const mapState = (state) =>{
    return{
        ...state
    }
}
export default connect(mapState,
    (dispatch)=>bindActionCreators(action,dispatch)
    )(Index)
